<template>
  <div>
    <el-menu :default-active="this.$route.path" class="el-menu-demo case-content" mode="horizontal" @select="handleSelect" router>
      <el-menu-item index="1" style="width: 200px">
        <img src="https://www.imooc.com/static/img/index/logo.png" >
      </el-menu-item>
      <el-menu-item index="/index" class="nav" @click="index">首页</el-menu-item>

      <!--    <el-menu-item index="3" class="nav">课程</el-menu-item>-->
      <el-submenu index="/st_course" class="nav">
        <template index="/st_course" slot="title">课程</template>
        <el-menu-item index="/st_course">职场提升</el-menu-item>
        <el-menu-item index="/st_course">编程与开发</el-menu-item>
        <el-menu-item index="/st_course">语言学习</el-menu-item>
        <el-menu-item index="/st_course">生活兴趣</el-menu-item>
        <el-menu-item index="/st_course">设计创意</el-menu-item>
        <el-menu-item index="/st_course">职业考试</el-menu-item>
      </el-submenu>
      <el-menu-item index="/teacher_message" class="nav">教师/学校信息</el-menu-item>

      <el-menu-item index="/student" class="nav">个人中心</el-menu-item>

      <el-menu-item class="nav" style="margin:  auto;">
        <el-autocomplete
          placeholder="搜索"
          clearable = 'false'
        >
          <i
            class="el-icon-search"
            slot="suffix"
          >
          </i>

        </el-autocomplete>
      </el-menu-item>


      <el-menu-item index="/login" class="nav" style="float: right" v-if = "!showname">登录</el-menu-item>
      <el-menu-item index="/login" class="nav" style="float: right" v-if = "showname" >注销</el-menu-item>
      <el-menu-item index="/student" class="nav" style="float: right;width: 150px;" v-if = "showname" >欢迎, {{ truename }} !</el-menu-item>
      <el-menu-item index='/register' class="nav" style="float: right">注册</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: 'Navmenu',
        data () {
            return {
                navList: [
                    {name: '/index',navItem:'主页'},
                    {name: '/jotter',navItem:'课程信息'},
                    {name: '/library',navItem:'教师/学校信息'},
                    {name: '/student',navItem:'个人中心'}
                ],
              showname:JSON.parse(window.sessionStorage.getItem('iflogin')), //判断登录
              loginname:window.sessionStorage.getItem('username')
            }

        },
        created () {
            this.getUser()
        },
        methods: {
            async getUser () {
                let res = await this.$axios.get('checkstudent', {
                    params:
                        {username:window.sessionStorage.getItem('username')}
                })
                this.truename=res.data.truename
            },

        }
    }
</script>>


<style scoped>
  .el-menu-demo{
    height: 75px;
    -webkit-box-shadow: 0 0 20px #d1c7e7;
    -moz-box-shadow: 0 0 20px #d1c7e7;
    box-shadow: 0 0 20px #d1c7e7;
    -o-box-shadow:0 0 20px #d1c7e7;
    /*border-radius: 100px/10px;*/
  }
  .nav{
    margin-top: 10px;
    color: #29333c;
  }
  .case-content{
    /*border-radius: 100px/10px;*/
    border-radius: 10px;
  }
  .case-content:before ,.case-content:after{
    z-index: -1;
    content: "";
    background-color:white;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    border-radius: 100px/10px;
  }

  .minShopClass>span{
    font-size: 10px;
    color: #959ca2;
  }
  .minShopClass i{
    display: inline-block;
    width: 50px;
    height: 25px;
    background: url("https://www.imooc.com/static/img/index/new/path_new.png") no-repeat;
    background-size: 22px;
    margin-top: 12px;
  }
  .minShopClass .i-php{
    background-position: center -21px;
  }
  .minShopClass .i-web{
    background-position: center 1px;
  }
  .minShopClass .i-java{
    background-position: center -42px;
  }
  .minShopClass .i-android{
    background-position: center -65px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

</style>
